<template>
    <div class="bar-container">
        <el-menu active-text-color="#00b1ff" background-color="#d1d7dd" text-color="black" :collapse="isCollapse" router
            unique-opened :default-active="activeMenu">
            <el-sub-menu v-for="item in props.sideItem" :key="item.index" :index="(item.index as string)">
                <template #title>
                    <el-icon>
                        <SvgIcon :name="item.iconName || 'default-icon'"></SvgIcon>
                    </el-icon>
                    <span>{{ item.label }}</span>
                </template>
                <template v-for="subItem in item.itemTitle" :key="subItem.index">
                    <MenuItem :menu-item="subItem" />
                </template>
            </el-sub-menu>
        </el-menu>
    </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import MenuItem from "./MenuItem.vue";

interface INavPath {
    label: string;
    index?: string;
    iconName?: string;
    itemTitle?: Array<ISubNavPath>;
}
interface ISubNavPath {
    label?: string;
    index?: string;
    subItemIconName?: string;
    subItemActiveColor?: string;
    childrenItemTitle?: Array<ISubNavPath>;
}

interface IProps {
    sideItem: Array<INavPath>;
    isCollapse?: boolean;
}

const props = defineProps<IProps>();
const route = useRoute();

const activeMenu = computed(() => route.path)
// const defaultActive = ref<string>(route.path);


</script>
<style scoped lang="scss">
.bar-container {
    width: 100%;
}

:deep(.el-menu) {
    background-color: #e3edf2;
    border-right: none;

    .el-menu-item,
    &:not(.el-menu--collapse) .el-sub-menu {
        min-width: 200px;
    }

    .el-sub-menu__title:hover {
        background-color: #50a2ff32;
    }

    .el-menu-item:hover {
        color: #00b1ff;
    }

    .el-menu-item:hover {
        background-color: #50a2ff32;
    }
}
</style>